<template>
  <page-wrap>
    <div class="details-container">
      <div class="header-h2">
        <h2>桌号：{{ params.roomName }}</h2>
        <div class="h2-table">台单号：{{ params.consumeCode }}</div>
      </div>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadData"
        :immediate-check="false"
        offset="100"
      >
        <div v-for="(item, index) in tableData" :key="index">
          <div class="details-container-header">
            <div class="container-header-item">
              <span class="item-title">人数：</span>
              <span style="color: #ffffff">{{ item.arrivedPeoperCount }}人</span>
              <span style="color: #ffffff">；共 {{ item.mainCount }} 项</span>
              <span style="color: #ffffff">、{{ item.mainGoodsCount }} 份；</span>
            </div>
            <!-- <div class="container-header-item">
              <span class="item-title">订台人：</span
              ><span style="color: #ffffff">{{ item.maintainUserName?item.maintainUserName:'--' }}</span>
            </div> -->
            <!-- <div class="container-header-item">
              <span class="item-title">开台时间：</span>
              <span style="color: #ffffff">
                    {{ dayjs(item.startTime).format('YYYY-MM-DD') }}
                    {{ dayjs(item.startTime).format('HH:mm:ss') }}
                  </span>
            </div> -->
            <div class="container-header-item">
              <span>商品金额：</span
              ><span style="color: #FFAA00"
                >￥{{ formatNumber(item.goodsTotalAmt) }}</span
              >
            </div>
            <div class="container-header-item">
              <span>收款金额：</span
              ><span style="color: #00FF00"
                >￥{{ formatNumber(item.payAmt) }}</span
              >
            </div>
            <div class="container-header-item">
              <span>未支付：</span
              ><span style="color: #ff3333"
                >￥{{ formatNumber(item.unPayAmt) }}</span
              >
            </div>
            <div class="container-header-item">
              <span>优惠总金额：</span
              ><span style="color: #ffcc66"
                >￥{{ formatNumber(item.disAmt) }}</span
              >
              <!-- <span class="item-preferential"
                >(折扣：{{ item.disAmt }}元、补低消：{{ item.addMinConsume }}元、服务费：{{ item.serviceAmt }}元、抹零：{{ item.smallChange }}元)</span
              > -->
            </div>
            <div class="container-header-item">
              <span>其它金额：</span
              ><span style="color: #ffffff"
                >￥{{ formatNumber(item.otherAmt) }}</span
              >
            </div>
            <div class="container-header-item">
              <span>开台备注：</span
              ><span style="color: #ffffff" v-if="item.note">{{
                item.note
              }}</span>
              <span style="color: #ffffff" v-else="item.note">无</span>
            </div>
          </div>
          <div class="details-container-main">
            <div class="container-main-header">
              <div class="main-header-title">未结账商品</div>
              <!-- <div class="main-header-value" v-if="item.unPayGoods.length > 0" @click="goTodeal(item)">
                去结账
              </div> -->
            </div>
            <div
              class="container-main-height"
              :class="{ isShow: showAllGoodsInfo }"
            >
              <!-- <div
                class="container-main-content"
                v-for="(v, k) in item.unPayGoods.slice(0, itemNumber)"
                :key="k"
              > -->
              <div
                class="container-main-content"
                v-for="(v, k) in item.unPayGoods"
                :key="k"
              >
                <div class="main-content-title">
                  <div class="title-product">{{v.mainGoodsCount}}份 {{v.mainCount}}项 &nbsp;</div>
                  <div class="title-time">
                    合计:￥{{ formatNumber(v.totalAmt) }}
                    <!-- {{ dayjs(v.orderTime).format('YYYY-MM-DD') }}
                    {{ dayjs(v.orderTime).format('HH:mm:ss') }} -->
                  </div>
                  <!-- <div class="title-oderNum">{{ v.payBatchCode }}</div> -->
                </div>
                <div class="main-content-back"></div>
                <div
                  class="main-content-item"
                  v-for="(vi, ki) in v.unPayGoodsdtl"
                  :key="ki"
                >
                  <div v-if="!vi.goodsPriceInfos">
                    <div class="content-item-name">
                      {{ vi.goodsName }}
                    </div>
                    <div class="content-item-value">
                      <div class="item-value-specifications">
                        规格：{{ vi.standard }}
                      </div>
                      <div class="item-value-num">×{{ vi.realQty }}</div>
                      <div class="item-value-price">
                        ￥{{ formatNumber(vi.totalAmt) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <van-collapse
                    v-model="activeNames"
                    class="main-content-package"
                    :accordion="false"
                    :is-link="false"
                    v-for="(packageItem, packageIndex) in v.unPayGoodsdtl"
                    :key="packageIndex"
                  >
                    <van-collapse-item
                      :name="packageItem.goodsCode + packageIndex"
                      @click="toggleActive('未结账',index, k, packageIndex)"
                      v-if="packageItem.goodsPriceInfos"
                    >
                      <template v-slot:title>
                        <div class="package-header">
                          <div class="package-header-title">
                            {{ packageItem.goodsName }}
                          </div>
                          <!-- <van-icon :name="customIcon" style="padding-left: 8px"  :class="{ overturn: isOverturn }"/> -->
                          <img
                            :src="customIcon"
                            class="package-img-icon"
                            v-if="packageItem.itemType == '2'"
                            :class="{
                              overturn: packageItem.isShow
                            }"
                          />
                        </div>
                        <div class="package-main">
                          <div class="package-main-num">
                            数量：{{ packageItem.realQty }}
                          </div>
                          <div class="package-main-price">
                            ￥{{ formatNumber(packageItem.totalAmt) }}
                          </div>
                        </div>
                      </template>
                      <template v-slot:default>
                        <div
                          class="package-footer"
                          v-for="(
                            packageGoods, packageGoodsInex
                          ) in packageItem.goodsPriceInfos"
                          :key="packageGoodsInex"
                          @click.stop=""
                        >
                          <div class="package-footer-name">
                            {{ packageGoods.goodsName }}
                          </div>
                          <div class="package-footer-value">
                            <div class="package-specifications">
                              规格：{{ packageGoods.standard }}
                            </div>
                            <div class="package-num">
                              ×{{ packageGoods.realQty }}
                            </div>
                            <div class="package-price">
                              ￥{{ formatNumber(packageGoods.realAmt) }}
                            </div>
                          </div>
                        </div>
                      </template>
                    </van-collapse-item>
                  </van-collapse>
                </div>

              </div>
            </div>

          </div>
          <div class="details-container-main">
            <div class="container-main-header">
              <div class="main-header-title">支付中商品</div>
              <!-- <div class="main-header-value" @click="goToPay(item)" v-if="item.payPendingGoods.length > 0">
                去支付
              </div> -->
            </div>
            <div
              class="container-main-height"
              :class="{ isShow: showAllGoodsInfo }"
            >
             
              <div
                class="container-main-content"
                v-for="(v, k) in item.payPendingGoods"
                :key="k"
              >
                <div class="main-content-title">
                  <div class="title-oderNum">{{ v.payBatchCode }}</div>
                  <div class="title-all">
                    <div class="title-product">{{v.mainGoodsCount}}份 {{v.mainCount}}项 &nbsp;</div>
                    <div class="title-time spe">
                      合计:￥{{ formatNumber(v.totalAmt) }}
                    </div>
                  </div>
                </div>
                <div class="main-content-back"></div>
                <div
                  class="main-content-item"
                  v-for="(vi, ki) in v.payGoodsdtl"
                  :key="ki"
                >
                  <div v-if="!vi.goodsPriceInfos">
                    <div class="content-item-name">
                      {{ vi.goodsName }}
                    </div>
                    <div class="content-item-value">
                      <div class="item-value-specifications">
                        规格：{{ vi.standard }}
                      </div>
                      <div class="item-value-num">×{{ vi.realQty }}</div>
                      <div class="item-value-price">
                        ￥{{ formatNumber(vi.totalAmt) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <van-collapse
                    v-model="activeNames"
                    class="main-content-package"
                    :accordion="false"
                    :is-link="false"
                    v-for="(packageItem, packageIndex) in v.payGoodsdtl"
                    :key="packageIndex"
                  >
                    <van-collapse-item
                      :name="packageItem.goodsCode + packageIndex"
                      @click="toggleActive('未结账',index, k, packageIndex)"
                      v-if="packageItem.goodsPriceInfos"
                    >
                      <template v-slot:title>
                        <div class="package-header">
                          <div class="package-header-title">
                            {{ packageItem.goodsName }}
                          </div>
                          <!-- <van-icon :name="customIcon" style="padding-left: 8px"  :class="{ overturn: isOverturn }"/> -->
                          <img
                            :src="customIcon"
                            class="package-img-icon"
                            v-if="packageItem.itemType == '2'"
                            :class="{
                              overturn: packageItem.isShow
                            }"
                          />
                        </div>
                        <div class="package-main">
                          <div class="package-main-num">
                            数量：{{ packageItem.realQty }}
                          </div>
                          <div class="package-main-price">
                            ￥{{ formatNumber(packageItem.totalAmt) }}
                          </div>
                        </div>
                      </template>
                      <template v-slot:default>
                        <div
                          class="package-footer"
                          v-for="(
                            packageGoods, packageGoodsInex
                          ) in packageItem.goodsPriceInfos"
                          :key="packageGoodsInex"
                          @click.stop=""
                        >
                          <div class="package-footer-name">
                            {{ packageGoods.goodsName }}
                          </div>
                          <div class="package-footer-value">
                            <div class="package-specifications">
                              规格：{{ packageGoods.standard }}
                            </div>
                            <div class="package-num">
                              ×{{ packageGoods.realQty }}
                            </div>
                            <div class="package-price">
                              ￥{{ formatNumber(packageGoods.realAmt) }}
                            </div>
                          </div>
                        </div>
                      </template>
                    </van-collapse-item>
                  </van-collapse>
                </div>
                <div class="details-container-footer">
                    <div class="container-footer-header">
                      <div class="footer-header-title">支付记录</div>
                    </div>
                    <div
                      class="container-footer-main"
                      :class="{ isShow: showAllPayInfo }"
                    >
                      <div
                        class="container-footer-item"
                        v-for="(payItem, payIndex) in v.payRecordList.slice(
                          0,
                          showItem
                        )"
                        :key="payIndex"
                        :class="{ 'first-item': payIndex === 0 }"
                      >
                        <div class="footer-item-header">
                          <div class="serial">
                            支付流水号:{{ payItem.itemCode }}
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '现金'">
                            现金支付
                          </div>
                          <div
                            class="method"
                            v-if="
                              payItem.payTypeName === '微信' ||
                              payItem.payTypeName === '支付宝'
                            "
                          >
                            线上支付
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '赠送'">
                            赠送支付
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '会员卡'">
                            会员卡支付
                          </div>
                        </div>
                        <div class="footer-item-main">
                          <div class="item-li">
                            <div class="item-li-left">支付时间</div>
                            <div class="item-li-right">
                              {{ dayjs(payItem.payDate).format('YYYY-MM-DD') }}
                              {{ dayjs(payItem.payDate).format('HH:mm:ss') }}
                            </div>
                          </div>
                          <div class="item-li">
                            <div class="item-li-left">支付金额</div>
                            <div class="item-li-right">
                              ￥{{ payItem.payAmt}}
                            </div>
                          </div>
                          <div class="item-li">
                            <div class="item-li-left">支付方式</div>
                            <div class="item-li-right">{{ payItem.payTypeName }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="container-footer-footer" @click="showPayAll(index)">
                      <van-icon
                        :name="v_triangle2"
                        class="footer-footer-icon"
                        :class="{ overturn: isPayOverturn }"
                      />
                    </div>
                </div>
               
              </div>
            </div>

          </div>
          <div class="details-container-main">
            <div class="container-main-header">
              <div class="main-header-title">已结账商品</div>
            </div>
            <div
              class="container-main-height"
              :class="{ isShow: showAllGoodsInfo }"
            >
              <div
                class="container-main-content"
                v-for="(v, k) in item.payGoods.slice(0, itemNumber)"
                :key="k"
              >
                <div class="main-content-title spe">
                  <div class="title-oderNum">{{ v.payBatchCode }}</div>
                  <div class="title-all">
                    <div class="title-product">{{v.mainGoodsCount}}份 {{v.mainCount}}项 &nbsp;</div>
                    <div class="title-time spe">
                      合计:￥{{ formatNumber(v.totalAmt) }}
                    </div>
                  </div>
                  
                </div>
                <div class="main-content-all">
                  <div class="content-all-btn" v-if="v.prodMethod == '未出品'" @click="changeGoodsType(v)">出品</div>
                  <div class="content-all-tip" v-else>已出品</div>
                  <div class="content-all-upper">
                    <div class="upper-title">优惠总金额：￥{{v.disTotalAmt}}</div>
                    <div class="upper-value">
                        <div class="value-top-left">赠送优惠：{{ v.storeDisAmt }}</div>
                        <div class="value-top-left">折扣优惠：{{ v.disAmt }}</div>
                        <div class="value-top-left">会员优惠：{{ v.vipDisAmt }}</div>
                        <div class="value-top-left">抹零：{{ v.smallChange }}</div>
                        <div class="value-top-left">团购券优惠：{{ v.ticketGroupAmt }}</div>
                    
                    </div>
                  </div>
                  <div class="content-all-upper">
                    <div class="upper-title">其他金额：￥{{v.otherTotalAmt}}</div>
                    <div class="upper-value">
                        <div class="value-top-left">服务费：{{ v.serviceAmt }}</div>
                        <div class="value-top-left">补低消差额：{{ v.addMinConsume }}</div>
                        <div class="value-top-left">不找赎：{{ v.notGiveChange }}</div>
                    </div>
                  </div>
                  
                </div>
                <div class="main-content-time">
                    <div class="time-line"></div>
                    <div class="time-title">下单时间：{{v.orderTime}}</div>
                    <div class="time-line"></div>
                </div>
                <div
                  class="main-content-item"
                  v-for="(vi, ki) in v.payGoodsdtl"
                  :key="ki"
                >
                  <div v-if="!vi.goodsPriceInfos">
                    <div class="content-item-name">
                      {{ vi.goodsName }}
                    </div>
                    <div class="content-item-value">
                      <div class="item-value-specifications">
                        规格：{{ vi.standard }}
                      </div>
                      <div class="item-value-num">×{{ vi.realQty }}</div>
                      <div class="item-value-price">
                        ￥{{ formatNumber(vi.realAmt) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <van-collapse
                    v-model="activeNames"
                    class="main-content-package"
                    :accordion="false"
                    :is-link="false"
                    v-for="(packageItem, packageIndex) in v.payGoodsdtl"
                    :key="packageIndex"
                  >
                    <van-collapse-item
                      :name="packageItem.goodsCode + packageIndex"
                      @click="toggleActive('已结账',index, k, packageIndex)"
                      v-if="packageItem.goodsPriceInfos"
                    >
                      <template v-slot:title>
                        <div class="package-header">
                          <div class="package-header-title">
                            {{ packageItem.goodsName }}
                          </div>
                          <!-- <van-icon :name="customIcon" style="padding-left: 8px"  :class="{ overturn: isOverturn }"/> -->
                          <img
                            :src="customIcon"
                            class="package-img-icon"
                            v-if="packageItem.itemType == '2'"
                            :class="{
                              overturn: packageItem.isShow
                            }"
                          />
                        </div>
                        <div class="package-main">
                          <div class="package-main-num">
                            数量：{{ packageItem.realQty }}
                          </div>
                          <div class="package-main-price">
                            ￥{{ formatNumber(packageItem.totalAmt) }}
                          </div>
                        </div>
                      </template>
                      <template v-slot:default>
                        <div
                          class="package-footer"
                          v-for="(
                            packageGoods, packageGoodsInex
                          ) in packageItem.goodsPriceInfos"
                          :key="packageGoodsInex"
                          @click.stop=""
                        >
                          <div class="package-footer-name">
                            {{ packageGoods.goodsName }}
                          </div>
                          <div class="package-footer-value">
                            <div class="package-specifications">
                              规格：{{ packageGoods.standard }}
                            </div>
                            <div class="package-num">
                              ×{{ packageGoods.realQty }}
                            </div>
                            <div class="package-price">
                              ￥{{ formatNumber(packageGoods.realAmt) }}
                            </div>
                          </div>
                        </div>
                      </template>
                    </van-collapse-item>
                  </van-collapse>
                </div>
                <div class="details-container-footer">
                    <div class="container-footer-header">
                      <div class="footer-header-title">支付记录</div>
                    </div>
                    <div
                      class="container-footer-main"
                      :class="{ isShow: showAllPayInfo }"
                    >
                      <div
                        class="container-footer-item"
                        v-for="(payItem, payIndex) in v.payRecordList.slice(0,showItem)"
                        :key="payIndex"
                        :class="{ 'first-item': payIndex === 0 }"
                      >
                        <div class="footer-item-header">
                          <div class="serial">
                            支付流水号:{{ payItem.itemCode }}
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '现金'">
                            现金支付
                          </div>
                          <div
                            class="method"
                            v-if="
                              payItem.payTypeName === '微信' ||
                              payItem.payTypeName === '支付宝'
                            "
                          >
                            线上支付
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '赠送'">
                            赠送支付
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '会员卡'">
                            会员卡支付
                          </div>
                        </div>
                        <div class="footer-item-main">
                          <div class="item-li">
                            <div class="item-li-left">支付时间</div>
                            <div class="item-li-right">
                              {{ dayjs(payItem.payDate).format('YYYY-MM-DD') }}
                              {{ dayjs(payItem.payDate).format('HH:mm:ss') }}
                            </div>
                          </div>
                          <div class="item-li">
                            <div class="item-li-left">支付金额</div>
                            <div class="item-li-right">
                              ￥{{ payItem.payAmt}}
                            </div>
                          </div>
                          <div class="item-li">
                            <div class="item-li-left">支付方式</div>
                            <div class="item-li-right">{{ payItem.payTypeName }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="container-footer-footer" @click="showPayAll(index)">
                      <van-icon
                        :name="v_triangle2"
                        class="footer-footer-icon"
                        :class="{ overturn: isPayOverturn }"
                      />
                    </div>
                </div>
              </div>
            </div>

           
          </div>
        </div>
      </van-list>
    </div>
  </page-wrap>
</template>
<script setup>
import { ref, reactive } from 'vue'
import ls from '@/lib/ls'
import { useRoute, useRouter } from 'vue-router'
import useAppStore from '@/store/app'
import useCartStore from '@/store/cart'

import { NavBar, Collapse, CollapseItem, showToast } from 'vant'
import dayjs from 'dayjs'
import v_triangle from '@/assets/svg/details/v_details-triangle.svg'
import v_triangle1 from '@/assets/svg/details/v_details-triangle1.svg'
import v_triangle2 from '@/assets/svg/details/v_triangle.svg'
import Api from '@/api'
import { onMounted } from 'vue'

const cartStore = useCartStore()
const appStore = useAppStore()
const route = useRoute()
const router = useRouter()
// 获取传过来的参数
const params = route.query

//--------------------------------------数据-----------------------------------------------
const tableData = ref([])
//---------------------------------------------------------------------------保留两位小数--------------------------------------------------
function formatNumber (num) {
  if (num) {
    return num.toFixed(2)
  } else {
    return 0
  }
}
//--------------------------------------套餐折叠-----------------------------------------------
const activeNames = ref(['']) // 当前展开面板的 name
const customIcon = ref(v_triangle)
// 翻转三角按钮
const toggleActive = (title,index, k, packageIndex) => {
  if(title == '已结账'){
    tableData.value[index].payGoods[k].payGoodsdtl[packageIndex].isShow =
    !tableData.value[index].payGoods[k].payGoodsdtl[packageIndex].isShow
  }else{
    tableData.value[index].unPayGoods[k].unPayGoodsdtl[packageIndex].isShow =
    !tableData.value[index].unPayGoods[k].unPayGoodsdtl[packageIndex].isShow
  }
 
}
//--------------------------------------商品信息折叠-----------------------------------------------
const itemNumber = ref(2) // 要显示几条数据
const isOverturn = ref(false)
const showAllGoodsInfo = ref(false) // 商品信息全部显示
// 显示全部
const showAll = val => {
  showAllGoodsInfo.value = !showAllGoodsInfo.value
  const itemAll = tableData.value[val].payGoods.length // 总共多少条数据
  if (itemNumber.value === 2) {
    itemNumber.value = itemAll
  } else {
    itemNumber.value = 2
  }
  isOverturn.value = !isOverturn.value
}
// ---------------------------------------------  按钮 ----------------------------------------------------------
// 去结账
const goTodeal = (e)=>{
      const d = ls.get('ROOM_DETAIL')
      console.log(d)
      if (d.consumeState != '3') {
        showToast('没有未支付的订单')
        return
      }
      ls.remove('CART_LIST')
      cartStore.cartList = []
      cartStore.tableInfo = {
        roomName: d.roomName,
        roomCode: d.roomCode,
        waiterUserCode: appStore.user_info.userCode,
        waiterUserName: appStore.user_info.userName,
        minConsume: d.minConsume,
        consumeCode: d.consumeCode,
        currentConsume: d.currentConsume,
        consumeMinConsume: d.consumeMinConsume,
        consumeRemark: d.consumeRemark
      }
      ls.set('TABLE_INFO', cartStore.tableInfo)
      cartStore.orderBatchCode = d.orderBatchCode
      cartStore.payBatchCode = d.payBatchCode
      ls.set('ORDER_BATCH_CODE', d.orderBatchCode)
      ls.set('PAY_BATCH_CODE', d.payBatchCode)
      router.push({
        path: `/open/orderConfirm`,
        query: { from: 'open' }
      })
     
}
// 去支付
const goToPay = (e)=>{
      const d = ls.get('ROOM_DETAIL')
      console.log(d)
      if (d.consumeState != '3') {
        showToast('没有未支付的订单')
        return
      }
      ls.remove('CART_LIST')
      cartStore.cartList = []
      cartStore.tableInfo = {
        roomName: d.roomName,
        roomCode: d.roomCode,
        waiterUserCode: appStore.user_info.userCode,
        waiterUserName: appStore.user_info.userName,
        minConsume: d.minConsume,
        consumeCode: d.consumeCode,
        currentConsume: d.currentConsume,
        consumeMinConsume: d.consumeMinConsume,
        consumeRemark: d.consumeRemark
      }
      ls.set('TABLE_INFO', cartStore.tableInfo)
      cartStore.orderBatchCode = d.orderBatchCode
      cartStore.payBatchCode = d.payBatchCode
      ls.set('ORDER_BATCH_CODE', d.orderBatchCode)
      ls.set('PAY_BATCH_CODE', d.payBatchCode)
  
  // 有支付中的订单
  router.push({
      path: '/open/orderCashier'
  })
      ls.set('PAY_TYPE', 3)
      
}

// 更新出品状态
const changeGoodsType = (e)=>{
  Api.Common.AppObjProcess.Do({
    functionName: 'UpdateGoodsPayType',
    contentData: {payBatchCode:e.payBatchCode}
  }).then(res=>{
    showToast('更新出品状态成功')
    loadData(true)
  })
}
//--------------------------------------支付记录折叠-----------------------------------------------
const showItem = ref(2) // 要显示几条数据
const isPayOverturn = ref(false)
const showAllPayInfo = ref(false) // 支付记录全部显示
// 显示全部
const showPayAll = val => {
  const showItemAll = tableData.value[val].payList.length // 总共多少条数据

  if (showItem.value === 2) {
    showItem.value = showItemAll
  } else {
    showItem.value = 2
  }
  showAllPayInfo.value = !showAllPayInfo.value
  isPayOverturn.value = !isPayOverturn.value
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
//表单
const postForm = reactive({
  roomCode: '', // 房台号
  consumeCode: '', // 订单号
  orderBatchCode:'',
  pageIndex: 1,
  pageSize: 15,
  stratDate: '', // 开始时间
  endDate: '' // 结束时间
})
const loading = ref(false)
const finished = ref(false)
// const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.pageIndex = 1
    tableData.value = []
    finished.value = false
  }
  loading.value = true
 
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'GetRoomOpeHistoryDetailNewV1',
    contentData: postForm
  })
  console.log(resp.result);
  if (refresh === true) {
    if (resp.result.length !== postForm.pageSize) {
      finished.value = true
    }
  }
 
  Array.prototype.push.apply(tableData.value, resp.result)
  console.log(tableData.value);
  if (resp.result.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
}
// -----------------------------------------------------初始化--------------------------------------------------
const onInit = () => {
  postForm.roomCode = params.roomCode
  if (params.consumeCode) {
    postForm.consumeCode = params.consumeCode
  }
  if(params.orderBatchCode){
    postForm.orderBatchCode = params.orderBatchCode
  }
  if (params.stratDate) {
    postForm.stratDate = params.stratDate
    postForm.endDate = params.endDate
  }

  loadData(true)

 
}
onInit()
</script>
<style scoped lang="scss">
::v-deep(.van-cell) {
  padding: 0;
}
::v-deep(.van-cell--clickable) {
  background: #28282e;
}
::v-deep(.van-cell__right-icon) {
  display: none;
}
::v-deep(.van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after) {
  border: none;
}
::v-deep(.van-collapse-item__content) {
  padding: 0;
  background: #28282e;
}
::v-deep(.van-collapse-item__title--expanded:after) {
  border: none;
}
::v-deep(.van-icon__image) {
  width: 20px;
  height: 20px;
}
::v-deep(.van-icon__image.clicked) {
  transform: rotate(180deg);
}
.details-container {
  //   padding: 0px 10px 10px;
  .header-h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 13px;
    h2 {
      background: #222226;
      border-radius: 4px;
      padding: 12px 13px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      white-space: nowrap;
      line-height: 18px;
      margin: 10px 12px 12px 0px;
    }
    .h2-table{
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 14px;
    }
  }
  .details-container-header {
    .container-header-item {
      padding: 0 0 20px 12px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 16px;
      .item-preferential {
        padding: 2px 0px 2px 6px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 12px;
      }
    }
  }

  .details-container-main {
    margin: 0px 12px 10px 12px;
    .container-main-header {
      // border-bottom: 1px solid #383840;
      background: #28282E;
      display: flex;
      justify-content: space-between;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      // background-image: url('@/assets/images/open/i_details_gradient.png');
      // background-repeat: no-repeat;
      // background-position: center center;
      // background-size: cover;
    
      .main-header-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffaa00;
        line-height: 18px;
        padding: 17px 0px 17px 12px;
      }
      .main-header-value {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 30px;
        width: 60px;
        height: 30px;
        background: #5C5C66;
        border-radius: 4px;
        text-align: center;
        margin-top: 10px;
        margin-right: 12px;
      }
    }
    .container-main-height {
      max-height: 2000px;
      overflow: hidden;
      transition: max-height 2s ease;
      will-change: max-height;
      &.isShow {
        max-height: 100%;
      }
      .container-main-content {
        background: #222226;
        .main-content-title {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          line-height: 12px;
          padding: 9px 6px 9px 6px;
          &.spe{
            justify-content: space-between;
          }
          .title-all{
            display: flex
          }
          .title-time{
            color: #FF3333;
            &.spe{
              color: #FFAA00;
            }
          }
        }
        .main-content-all{
          position: relative;
          .content-all-btn{
            position: absolute;
            right: 10px;
            width: 60px;
            height: 30px;
            background: #5C5C66;
            border-radius: 4px;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 30px;
            text-align: center;
          }
          .content-all-tip{
            position: absolute;
            right: 10px;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #999999;
            line-height: 30px;
            text-align: center;
          }
          .content-all-upper{
            .upper-title{
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 16px;
              color: #FFFFFF;
              line-height: 16px;
              padding-bottom: 12px;
              padding-left: 12px;
            }
            .upper-value{
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              padding: 0 20px;
              .value-top-left{
                // flex-basis: 50%;
                // flex: 1;
                width: 50%;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 12px;
                color: #999999;
                line-height: 12px;
                padding-bottom: 10px
              }
            }
          }
        }
        .main-content-time{
          background: #28282E;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 9px 0 24px;
          .time-line{
            width: 60px;
            height: 1px;
            background: #999999;
          }
          .time-title{
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 13px;
            color: #999999;
            line-height: 13px;
          }
        }
        .main-content-back{
          height: 10px;
          background: #28282E;
        }
        .main-content-item {
          .content-item-name {
            padding: 0 0 12px 22px;
            font-size: 16px;
            color: #ffffff;
            line-height: 16px;
          }
          .content-item-value {
            display: flex;
            flex-wrap: wrap;
            padding: 0 34px 20px 34px;
            div {
              font-size: 14px;
              flex-basis: 33.33%;
              font-family: PingFang SC;
              font-weight: 500;
              color: #cccccc;
              line-height: 14px;
            }
            .item-value-specifications {
              // margin-left: 34px;
            }
            .item-value-num {
              text-align: center;
            }
            .item-value-price {
              color: #ffffff;
              text-align: right;
            }
          }
        }
        .main-content-package {
          .package-header {
            display: flex;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 16px;
            .package-img-icon {
              width: 16px;
              height: 16px;
              margin-left: 8px;
              &.overturn {
                transform: rotate(180deg);
              }
            }

            &-title {
              padding: 0 0 14px 22px;
            }
          }
          .package-main {
            display: flex;
            justify-content: space-between;
            padding: 0 34px 30px 34px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 14px;
            &-num {
              color: #cccccc;
            }
            &-price {
              color: #ffffff;
            }
          }

          .package-footer {
            .package-footer-name {
              padding: 0 0 12px 34px;
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 16px;
            }
            .package-footer-value {
              display: flex;
              flex-wrap: wrap;
              padding: 0 34px 20px 46px;
              div {
                font-size: 14px;
                flex-basis: 33.33%;
                font-family: PingFang SC;
                font-weight: 500;
                color: #cccccc;
                line-height: 14px;
              }
              .package-specifications {
              }
              .package-num {
                text-align: center;
                flex-basis: calc(33.33% - 12px);
              }
              .package-price {
                color: #cccccc;
                text-align: right;
                flex-basis: calc(33.33% + 12px);
              }
            }
          }
        }
        .main-content-footer {
          display: flex;
          justify-content: space-between;
          align-content: center;
          font-family: PingFang SC;
          font-weight: 500;
          margin: 0 12px 0 12px;
          border-bottom: 1px solid #383840;
          .footer-order {
            padding: 4px 8px 4px 8px;
            font-size: 13px;
            color: #cccccc;
            line-height: 13px;
            background: #45454d;
            border-radius: 2px;
            margin-bottom: 20px;
          }
          .footer-right {
            display: flex;
            margin-bottom: 22px;
            // align-content:flex-end;

            &-all {
              font-size: 12px;
              color: #cccccc;
              line-height: 12px;
              align-self: flex-end;
            }
            &-value {
              font-size: 18px;
              color: #ffaa00;
              line-height: 18px;
              align-self: flex-end;
            }
          }
        }
      }
    }

    .container-main-footer {
      margin: 0 auto;
      background: #28282e;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      .main-footer-icon {
        padding: 10px 0;
      }
      .overturn {
        transform: rotate(180deg);
      }
    }
  }
  .details-container-footer {
    // margin: 0px 12px 10px 12px;
    .container-footer-header {
      border-top: 1px dashed #999999;;
      // border-top-left-radius: 8px;
      // border-top-right-radius: 8px;
      // background-image: url('@/assets/images/open/i_details_gradient.png');
      // background-repeat: no-repeat;
      // background-position: center center;
      // background-size: cover;
      .footer-header-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffaa00;
        line-height: 18px;
        padding: 17px 0px 0px 12px;
      }
    }
    .container-footer-main {
      max-height: 700px;
      overflow: hidden;
      // background: #28282e;
      padding: 10px 12px 0 12px;
      &.isShow {
        max-height: 100%;
      }
      .container-footer-item {
        background: #313138;
        border-radius: 4px;
        margin-top: 10px;
        &.first-item {
          margin-top: 0px;
        }
        .footer-item-header {
          display: flex;
          justify-content: space-between;
          .serial {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 12px;
            padding: 19px 0 18px 12px;
          }
          .method {
            margin: 12px 12px 12px 0;
            padding: 6px 0px;
            // background: #454c4a;
            border-radius: 4px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #66ccaa;
            line-height: 13px;
          }
        }
        .footer-item-main {
          padding-bottom: 2px;
          .item-li {
            display: flex;
            justify-content: space-between;
            font-family: PingFang SC;
            font-weight: 500;
            &-left {
              padding: 0px 0px 18px 20px;
              font-size: 14px;
              color: #cccccc;
              line-height: 14px;
            }
            &-right {
              padding: 0px 20px 18px 0;
              font-size: 14px;
              color: #ffffff;
              line-height: 14px;
            }
          }
        }
      }
    }
    .container-footer-footer {
      margin: 0 auto;
      background: #28282e;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      .footer-footer-icon {
        padding: 10px 0;
      }
      .overturn {
        transform: rotate(180deg);
      }
    }
  }
}
.title-oderNum {
  color: #FFAA00 !important;
}
</style>
